<script setup>
import { ref, onMounted, computed, reactive } from "vue";
import {
    getAll,
    addStudent,
    deleteStudent,
    editStudent,
} from "@/api/indexApi.js";
import { ElNotification } from "element-plus";
// import { Search } from '@element-plus/icons-vue';

// 表格数据
let tableData = ref([]);

// 控制添加表单对话框
let dialogFormVisible = ref(false);

// 控制修改表单对话框
let dialogedit = ref(false);

// 删除提示弹出框
const centerDialogVisible = ref(false);

// 删除选中数据弹出框
let deleteAllDialog = ref(false)

// 删除的要数据
let deletedata = ref();

// 需要修改的数据
let editdata = ref();

// 搜索值
const search = ref("");

// 表单数据
const form = reactive({
    name: "",
    date: "",
    address: "",
});

// 表单对齐方式
const labelPosition = ref("right");

// 多选框数据
let selectionData = ref([]);

// 搜索操作
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
);

// 编辑
function handleEdit(index, row) {
    editdata.value = row;
    // console.log(index, row);
    // 打开修改表单
    dialogedit.value = true;
}

// 删除
function handleDelete(index, row) {
    centerDialogVisible.value = true;
    deletedata.value = row;
    // console.log(deletedata.value);
    // console.log(row);
}
// 确认删除
function handleDeleteSure() {
    let row = deletedata.value;
    // console.log(row.name);
    deleteStudent([row.id]).then((res) => {
        if (res.data.code == 200) {
            ElNotification.success({
                title: "success",
                message: `成功删除记录'${row.name}'`,
                showClose: true,
            });
            centerDialogVisible.value = false;
            // 刷新数据
            funcgetall();
        }
    });
}

// 获取所有数据
function funcgetall() {
    getAll().then((res) => {
        tableData.value = res.data;
    });
}

onMounted(() => {
    funcgetall();
});

// 表单提交函数
const addaname = () => {
    let n = form.name;
    let d = form.date;
    let a = form.address;
    addStudent(n, d, a).then((res) => {
        console.log(res.data);
        dialogFormVisible.value = false;
        if (res.data.code == 200) {
            ElNotification.success({
                title: "success",
                message: "数据添加成功",
                showClose: true,
            });
            funcgetall();
            // location.reload()
        }
    });
};

// 提交修改
function submitEdit() {
    let i = editdata.value.id;
    let n = editdata.value.name;
    let d = editdata.value.date;
    let a = editdata.value.address;
    editStudent(i, n, d, a).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
            dialogedit.value = false;
            ElNotification.success({
                title: "success",
                message: "数据修改成功",
                showClose: true,
            });
            funcgetall();
        }
    });
}

// 取消编辑
function unedit() {
    dialogedit.value = false;
    funcgetall();
}

// 勾选复选框
function handleSelectionChange(val) {
    val.map((item) => selectionData.value.push(item.id))
}

// 批量删除按钮
function deleteSelected() {
  // 打开确认弹窗
  if (selectionData.value.length > 0){
    deleteAllDialog.value = true
  }else{
    ElNotification({
                title: "tip",
                message: "你没有选中任何数据",
                showClose: true,
            });
  }
  
}

// 确认批量删除弹窗
let  handleDeleteAllSure = ()=>{
  
  if (selectionData.value.length > 0) {
        deleteStudent(selectionData.value).then((res) => {
            console.log(res.data);
            if (res.data.code == 200) {
                ElNotification.success({
                    title: "success",
                    message: "成功删除已选中",
                });
                deleteAllDialog.value = false
                funcgetall();
            }
        });
    }else{
      console.log("没有选中的");
    }
}

</script>

<template>
    <div>
        <p class="title">后台管理系统</p>

        <!-- 添加数据表单 -->
        <div class="tools">
            <el-button type="primary" link  @click="dialogFormVisible = true">
                添加数据
            </el-button>
            <el-button type="danger" @click="deleteSelected"> 删除选中 </el-button>
        </div>

        <!-- 添加数据对话框 -->
        <el-dialog v-model="dialogFormVisible" title="添加学生数据">
            <el-form
                :label-position="labelPosition"
                label-width="100px"
                style="max-width: 460px"
            >
                <el-form-item label="名字">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                        v-model="form.date"
                        type="date"
                        placeholder="选择一个日期"
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="addaname">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 修改数据表单 -->
        <el-dialog v-model="dialogedit" title="修改数据">
            <el-form
                :label-position="labelPosition"
                label-width="100px"
                style="max-width: 460px"
            >
                <el-form-item label="名字">
                    <el-input v-model="editdata.name" />
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                        v-model="editdata.date"
                        type="date"
                        placeholder="选择一个日期"
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="editdata.address" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="unedit">取消</el-button>
                    <el-button type="primary" @click="submitEdit">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 删除提示弹出框 -->
        <el-dialog
            v-model="centerDialogVisible"
            title="Warning"
            width="30%"
            align-center
        >
            <span style="color: #f56c6c">确定删除该记录？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false"
                        >取消</el-button
                    >
                    <el-button type="danger" @click="handleDeleteSure">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 删除选中提示弹出框 -->
        <el-dialog
            v-model="deleteAllDialog"
            title="批量删除"
            width="30%"
            align-center
        >
            <span style="color: #f56c6c">确定删除选中的所有记录？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="deleteAllDialog = false"
                        >取消</el-button
                    >
                    <el-button type="danger" @click="handleDeleteAllSure">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 表格 -->
        <div class="students-table">
            <el-table
                height="500"
                @selection-change="handleSelectionChange"
                :data="
                    tableData.filter(
                        (data) =>
                            !search ||
                            data.name
                                .toLowerCase()
                                .includes(search.toLowerCase())
                    )
                "
                style="width: 100%"
                stripe
            >
                <el-table-column type="selection" width="55" @select="select()">
                </el-table-column>
                <el-table-column type="index" width="50" />
                <el-table-column label="Date" prop="date" />
                <el-table-column label="Name" prop="name" />
                <el-table-column prop="address" label="地址"> </el-table-column>

                <!-- 操作列 -->

                <el-table-column align="right">
                    <template #header>
                        <el-input
                            v-model="search"
                            size="small"
                            placeholder="Type to search"
                        />
                    </template>
                    <template #default="scope">
                        <el-button
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)"
                            >Edit</el-button
                        >
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                            >Delete</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<style scoped>
.read-the-docs {
    color: #888;
}
.students-table {
    width: 980px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #efefef;
    border-radius: 19px;
    overflow: hidden;
}
.title {
    text-align: center;
    font-size: 32px;
    color: #333;
}

.tools {
    width: 980px;
    margin: 10px auto;
}
</style>
